<template>
	<div>
		<div class="login-msg-wrapper">
			<div class="logo"></div>
			<div class="msg-input-main">
				<div class="cuntry vux-1px-r">
					 <select v-model="selected">
							<option v-bind:value="data.country_code" v-for="(data,index) in countryList">
								<span class="name">{{data.cn_name}}</span>
								<span class="number">+{{data.country_code}}</span>
							</option>
					 </select>
				</div>
				<input type="text" class="msg-telephone" placeholder="手机号" maxlength="15" v-model="phoneNum" @click="focuswram">
			</div>
			<div class="warn">
				<div class="warm-show" v-show="msgtelephonewram">
					<i class="warn-icon"></i>
					<span>{{telephonewramtext}}</span>
				</div>
			</div>
			<div class="msg-input-main">
				<input type="text" class="msg-tuxin" name="captcha" placeholder="图形验证码" maxlength="6" v-model="picveritycode">
				<img  src="/captcha/default?0.7035211305985292" onclick="this.src='/captcha/default?'+Math.random()">
			</div>
			<div class="warn">
				<div class="warm-show" v-show="sendmsgwram">
					<i class="warn-icon"></i>
					<span>{{sendmsgwramtext}}</span>
				</div>
			</div>
			<div class="msg-input-main">
				<input type="tel" class="dx-code" placeholder="短信验证码" maxlength="10"  v-model="msgveritycode">
				<button class="code-btn vux-1px-l" @click="sendmsgcode" v-bind:disabled="disabled">{{sendmsgtext}}</button>
			</div>
			<div class="warn">
				<div class="warm-show" v-show="shortloginwram">
					<i class="warn-icon"></i>
					<span>{{shortloginwramtext}}</span>
				</div>
			</div>
			<button class="login-msg-deter" @click="shortlogin">立即登陆</button>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
		    return {
		    	phoneNum:'',
		    	selected:"86",
		    	msgtelephonewram:false,
		    	telephonewramtext:'手机号码不能为空',
		    	sendmsgtext:'获取验证码',
		    	sendmsgwram:false,
		    	sendmsgwramtext:'',
		    	msgveritycode:'',
		    	time:0,
		    	picveritycode:'',
		    	needVerify:1,
		    	disabled:false,
		    	shortloginwram:false,
		    	shortloginwramtext:'',
		    	id:'',
		    	countryList:[],
		    }
		},
		methods: {
		 	sendmsgcode(){
		 		if(!this.phoneNum){
		 			this.msgtelephonewram=true;
		 		}else{
			 		this.time=60;
			 		let data = {'mobile':this.phoneNum,'needVerify':this.needVerify,'nationCode':this.selected,'code':this.picveritycode};
		            axios.post('/api/oauth/sms/sender/mobile_used',data).then((res)=>{
		            	if(res.data.resp_msg.msg_code==400){
		            		this.sendmsgwram=true;
		            		this.sendmsgwramtext=res.data.resp_msg.msg_error.message;
		            	}else{
		            		this.sendmsgwram=false;
		            		this.timer();
		            	}
	            	})
		        }
		 	},
		 	timer(){
		    	if(this.time>0){
					this.time--;
					this.sendmsgtext = this.time+"s后重新获取";
					var timer = setTimeout(this.timer,1000);
		      	}else if(this.time == 0){
					this.sendmsgtext = "获取验证码";
					clearTimeout(timer);
					this.disabled = false;
		        }
		    },
		    shortlogin(){
		    	let data = {'mobile':this.phoneNum,'code':this.msgveritycode};
	            axios.post('/api/oauth/login/short',data).then((res)=>{
	            	if(res.data.resp_msg.msg_code==400){
	            		this.shortloginwram=true;
	            		this.shortloginwramtext=res.data.resp_msg.msg_error.message;
	            	}else{
	            		this.shortloginwram=false;
	            		this.id=res.data.resp_data.id;
		                if(!res.data.resp_data.user_type||res.data.resp_data.user_type==0){
		                	this.$router.push('/oauth/choiceidentity/'+this.id);
			            }else{
			            	this.$router.push('/oauth/home'); 	
			            }
	            	}
            	})
		    },
		    focuswram(){
		    	this.msgtelephonewram=false;
		    }
		},
		mounted() {
			axios.get('/api/oauth/country_code').then(ret => {
			this.countryList = ret.data.resp_data;
			});
		},
		computed: {

		}
	}
</script>

<style>
@import url("../../styles/common/oauth/oauth-common.css");
.login-msg-wrapper{padding:0 12px;}
.login-msg-wrapper .logo{width:130px;height:83px;margin:30px auto;background: url(../../static/oauth-img/logo.png) no-repeat;background-size:130px 83px;}
.login-msg-wrapper .msg-input-main{height:36px;padding: 4px 3px 4px 10px;border:1px solid #eee;border-radius: 3px;line-height: 36px;display: flex;background: #f9f9f9;}
.msg-input-main .cuntry{flex:0 90px;width: 90px;margin-right:10px;}
.cuntry select{display: block;width: 80px;height: 36px;overflow: hidden;}
.cuntry select option{display: block;width:80px;height: 36px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.cuntry select option .name{height: 18px;line-height: 18px;color: #888;font-size: 14px;}
.cuntry select option .number{height: 18px;line-height: 18px;color: #008cf0;font-size: 12px;padding-left:3px;}
.msg-input-main .msg-telephone{flex: 1;}
.msg-input-main .msg-tuxin{flex:1;}
.msg-input-main img{flex:0 0 120px;background: #f9f9f9;width: 120px;margin-left: 10px;}
.msg-input-main .dx-code{flex: 1;}
.msg-input-main .code-btn{flex:0 100px;width:100px;text-align: center;margin-left: 10px;background: #f9f9f9;color: #008cf0;font-size: 14px;}
.login-msg-deter{display:block;width:100%;height: 44px;background: #1e87e6;line-height: 44px;font-size:14px;color: #fff;text-align: center;border-radius:5px;margin-top:15px;}
</style>